<template>
  <div class="ruku">
    <el-dialog
      :title="info&&info.flag==1?'手动入库':'自动入库'"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      :before-close="close"
      width="65%"
      class="ruku-dialog"
    >
      <div>
          <div v-if="info.flag==1">
            <!-- 手动入库 -->
            <div class="upload">
              <el-upload
                :show-file-list="false"
                :action="baseUrl()+'/common/upload'"
                :on-success="fileSucNoAuto">
                <el-button size="small" type="warning" icon="el-icon-folder-add">上传验收单</el-button>
              </el-upload>
              <div class="unloadBox">
                <div class="file" v-for="(item,index) in noAutoData.annexList">
                  <span class="index">{{index+1}}、</span>
                  <span class="blue">{{item.fileName}}</span>
                  <i class="blue el-icon-delete" @click="fileDelNoAuto(index,item.filePath)"></i>
                </div>
              </div>
            </div>
            <br>
            <el-table :data="tabelData" border>
              <el-table-column align="center" type="index" label="序号" width="55" />
              <el-table-column align="center" label="设备编号" property="deviceCode" width="150">
                <template slot-scope="scope">
                  <el-input type="text"
                    v-model="scope.row.deviceCode"
                    @keydown.native="validateCounts(scope.row,scope.$index, $event)"
                    :ref='scope.$index'></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="设备型号" property="deviceModel" />
              <el-table-column align="center" label="设备类别" property="typeName" />
              <el-table-column align="center" label="入库时间" property="storageDate" width="170" />
              <el-table-column align="center" label="入库数量">
                <template>1</template>
              </el-table-column>
              <el-table-column align="center" label="设备单位" property="deviceUnit" />
              <el-table-column align="center" label="需要程度" property="degreeNeed" />
              <el-table-column align="center" label="用途" property="purpose" />
              <el-table-column align="center" label="备注" property="remark" />
            </el-table>
            <div style="text-align:center;margin:40px 0;">
              <el-button size="mini" type="success" @click="submit" icon="el-icon-plus">提交</el-button>
            </div>
          </div>
        <div v-if="info.flag==2">
          <!-- 自动入库 -->
          <div class="upload">
            <el-upload
              :show-file-list="false"
              :action="baseUrl()+'/common/upload'"
              :on-success="fileSuccess">
              <el-button size="small" type="warning" icon="el-icon-folder-add">上传验收单</el-button>
            </el-upload>
            <div class="unloadBox">
              <div class="file" v-for="(item,index) in autoData.annexList">
                <span class="index">{{index+1}}、</span>
                <span class="blue">{{item.fileName}}</span>
                <i class="blue el-icon-delete" @click="fileDel(index,item.filePath)"></i>
              </div>
            </div>
          </div>
          <div style="text-align:center;margin:40px 0;">
            <el-button size="mini" type="success" @click="autoSubmit" icon="el-icon-plus">提交</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import {fileDelete,fileDownload,fileDeleteLibrary} from '@/api/basicInformation/index'
export default {
  props:['info'],

  data(){
    return{
      dialogTableVisible:true,
      tabelData:[],
      autoData:{
        annexList:[]
      },
      noAutoData:{
        annexList:[]
      }
    }
  },
  created(){
    console.log(this.info)
    //this.info.storageNumbe
    for(let i=0;i<4;i++){
      let obj={...this.info,deviceCode:''}
      this.tabelData[i]=JSON.parse(JSON.stringify(obj))
    }
  },
  methods:{
    close() {
      this.$emit("subSetChane")
    },
    validateCounts(row,index, e) {
      const val = e.target.value;
      var keyCode = e.keyCode || e.which || e.charCode;
      if(keyCode=== 13) {
        this.$refs[index].blur()
        if(Object.keys(this.$refs).length-1 === index) {
            index = -1
        }
        this.$refs[Object.keys(this.$refs)[index + 1]].focus();
      }
      this.$set(this.tabelData,index,row)
    },
    fileSuccess(res) {
        this.autoData.annexList.push({ fileName: res.fileName, filePath: res.filePath})
    },
    async fileDel(index, filePath) {
      for (let i = 0; i < this.autoData.annexList.length; i++) {
        if (index == i) {
          if (this.autoData.annexList[i].id) {
            await fileDeleteLibrary(this.autoData.annexList[i].id)
          } else {
            await fileDelete(filePath)
          }
          this.autoData.annexList.splice(i, 1)
        }
      }
    },
    fileSucNoAuto(res) {
        this.noAutoData.annexList.push({ fileName: res.fileName, filePath: res.filePath})
    },
    async fileDelNoAuto(index, filePath) {
      for (let i = 0; i < this.noAutoData.annexList.length; i++) {
        if (index == i) {
          if (this.noAutoData.annexList[i].id) {
            await fileDeleteLibrary(this.noAutoData.annexList[i].id)
          } else {
            await fileDelete(filePath)
          }
          this.noAutoData.annexList.splice(i, 1)
        }
      }
    },
    autoSubmit(){
      //自动
      this.autoData.storageDate=this.info.storageDate
      this.autoData.storageNumber=this.info.storageNumber
      this.autoData.procureDeviceId=this.info.procureDeviceId
      this.autoData.id=this.info.id
      this.autoData.deviceLevel=this.info.deviceLevel
      this.autoData.deviceTypeId =this.info.deviceTypeId
      request({
        url:'/device/storageRecord/voluntarily/storage',
        method:'post',
        data:this.autoData
      }).then((res)=>{
        if(res.code==200){
          this.$message.success(res.msg)
          this.$emit("subSetChane")
        }
      })
    },
    submit(){
      //手动
      this.noAutoData.addDtoList=[]
      for(let i=0;i<this.tabelData.length;i++){
        if(!this.tabelData[i].deviceCode){
          this.$message.warning('请填写完所有设备编号')
          return false
        }
        this.noAutoData.addDtoList[i]={deviceCode:this.tabelData[i].deviceCode}
      }

      this.noAutoData.storageDate=this.info.storageDate
      this.noAutoData.storageNumber=this.info.storageNumber
      this.noAutoData.procureDeviceId=this.info.procureDeviceId
      this.noAutoData.id=this.info.id
      this.noAutoData.deviceLevel=this.info.deviceLevel
      this.noAutoData.deviceTypeId =this.info.deviceTypeId
      // debugger
      // return false
      request({
        url:'/device/storageRecord/manualOperation/storage',
        method:'post',
        data:this.noAutoData
      }).then((res)=>{
        if(res.code==200){
          this.$message.success(res.msg)
          this.$emit("subSetChane")
        }
      })
    }
  }
}
</script>

<style lang="scss">
.ruku-dialog .el-dialog__body {
  height: 85vh;
  overflow: scroll;
}
.ruku-dialog{
  .unloadBox {
      border: 1px solid #cccccc;
      margin-top: 20px;
      min-height: 50px;
      // overflow: hidden;
      // width: 1000px;

      .file {
        width: 100%;
        border-top: 1px #cccccc dotted;
        line-height: 50px;

        .index {
          padding: 0 10px;
          color: #666
        }

        i {
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }

        .type {
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
    }
}
</style>
